<template>
  <el-dialog
    title="装修申请审核"
    v-model="model"
    width="400px"
    :before-close="closeHandle"
  >
    <el-form ref="reviewRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="审核状态" prop="status">
        <el-select v-model="form.status" placeholder="请选择审核状态">
          <el-option
            v-for="(value, key) in statusOptions"
            :key="key"
            :label="value"
            :value="Number(key)"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.status === 2" label="拒绝原因" prop="reason">
        <el-input v-model="form.reason" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeHandle">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { updateFitmentApplication } from "@/api/operateManage"; // 假设有这个API

const props = defineProps({
  row: {
    type: Object,
    required: true,
  },
});

const reviewRef = ref();

const emit = defineEmits(["submit"]);
const model = defineModel({
  default: false,
});

const statusOptions = {
  0: "待审核",
  1: "审核通过",
  2: "审核拒绝",
};

onMounted(() => {
  form.value.status = props.row.status;
});

const form = ref({
  id: props.row.id,
  status: props.row.status,
  reason: "",
});

const rules = ref({
  status: [{ required: true, message: "请选择审核状态" }],
  reason: [{ required: true, message: "请输入拒绝原因" }],
});

const closeHandle = () => {
  model.value = false;
};

const submitForm = () => {
  reviewRef.value.validate((valid) => {
    if (valid) {
      updateFitmentApplication(form.value).then(({ data }) => {
        if (data) {
          ElMessage({
            message: "审核状态更新成功",
            type: "success",
          });
          closeHandle();
          emit("submit", form.value);
        } else {
          ElMessage({
            message: "操作失败",
            type: "error",
          });
        }
      });
    }
  });
};
</script>
